<template>
<el-dialog
    :title="$t('plus.edit')"
    v-model="dialogVisible"
    @close="cancelFunc"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="30%"
  >
    <el-form :model="formData">
      <el-form-item :label="$t('plus.wechat_nickname')" :label-width="formLabelWidth"
        ><el-input
          type="text"
          v-model="formData.nickName"
          autocomplete="off"
          :disabled="true"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.wechat_avatar')" :label-width="formLabelWidth"
        ><img v-img-url="formData.avatarUrl" width="50" height="50"
      /></el-form-item>
      <el-form-item :label="$t('plus.real_name')" :label-width="formLabelWidth"
        ><el-input
          type="text"
          v-model="formData.realName"
          autocomplete="off"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.phone')" :label-width="formLabelWidth"
        ><el-input
          type="text"
          v-model="formData.mobile"
          autocomplete="off"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.referrer_id')" :label-width="formLabelWidth">
        <el-input
          type="text"
          v-model="formData.refereeId"
          autocomplete="off"
        ></el-input>
        <div class="tips">{{$t('plus.no_superior_note')}}</div>
      </el-form-item>
      <el-form-item :label="$t('plus.referrer_nickname')" :label-width="formLabelWidth">
        <span v-if="formData.referee">{{formData.referee.nickName}}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFunc">{{$t('plus.cancel')}}</el-button>
        <el-button type="primary" @click="confirmFunc">{{$t('plus.confirm')}}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PlusApi from "@/api/plus.js";
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: "100px",
      /*是否显示*/
      dialogVisible: false,
      /*表单数据模型*/
      formData: {},
      old_referee_id: 0
    };
  },
  props: {
    open_edit: Boolean,
    userModel: Object
  },
  watch: {
    open_edit: function (n, o) {
      if (n != o) {
        this.dialogVisible = this.open_edit;
        if (n) {
          this.formData = this.userModel;
          this.old_referee_id = this.formData.refereeId;
        }
      }
    }
  },
  created() {},
  methods: {
    /*修改用户*/
    confirmFunc() {
      let self = this;
      let params = {};
      params.userId = this.formData.userId;
      params.realName = this.formData.realName;
      params.mobile = this.formData.mobile;
      if (self.formData.refereeId > 0) {
        PlusApi.toAgentUserEdit({
          userId: self.formData.refereeId
        }, true).then(res => {
          if (!res.data) {
            ElMessage({
              message: $t("plus.superior_not_exist"),
              type: "error"
            });
            return;
          }
          if (this.formData.userId == self.formData.refereeId) {
            ElMessage({
              message: $t("plus.cannot_bind_self"),
              type: "error"
            });
            return;
          }
          ElMessageBox.confirm($t("plus.confirm_update_superior") + res.data.realName + "?", $t("plus.prompt"), {
            type: "warning"
          }).then(() => {
            params.refereeId = self.formData.refereeId;
            self.editUser(params);
          });
        }).catch(error => {});
      } else {
        params.refereeId = 0;
        self.editUser(params);
      }
    },
    editUser(params) {
      let self = this;
      console.log(params, "params");
      PlusApi.agentUserEdit(params, true).then(data => {
        ElMessage({
          message: $t("plus.edit_success"),
          type: "success"
        });
        self.cancelFunc(true);
      }).catch(error => {});
    },
    /*关闭弹窗*/
    cancelFunc(e) {
      let type = "cancel";
      if (e) {
        type = "success";
      }
      this.$emit("close", {
        type: type
      });
    }
  }
};
</script>

